<template>
<!-- 所有内容都需要根节点包围起来 -->
    <div>
        <!-- <v-header></v-header> -->
        <h2>Home组件</h2>
        <button @click="run()">click it</button>
        <v-life v-if="flag"></v-life>
        <br>
        <br>
        <button @click="flag=!flag">组件挂载和卸载</button>
        <br>
        <hr>
        <!-- 给brother组件传值 -->
        <button @click="emitDataToBro()">给brother传值广播数据</button>
    </div>
</template>


// 逻辑
<script>
import head from './Header'
import life from './Life'
// 引入空的vue实例
import VueEvent from '../vueEvent'
/**
* 非父子组件传值-----通知$emit广播 $on 接收
* 1.新建一个js文件  然后引入vue 实例化vue 最后暴露这个实例
* 2.在要广播的地方引入刚才定义的实例
* 3.通过 VueEvent.$emit('名称','数据')广播
* 4.在接收数据的地方  VueEvent.$on('数据',function（data）{})
*
* */
export default {
    components:{
      'v-header':head,
      'v-life':life
    },
    data(){
        return {
            msg:'我是首页组件',
            flag:true
        }
    },
    methods:{
        // 广播数据---发送广播
        emitDataToBro(){
        VueEvent.$emit('tobrother',this.msg);
        },
      run(){
          alert(this.msg)
      }
    },
   
}
</script>
// scoped css 局部作用域
 <style lang="scss" scoped>


</style>
